<!--
 * @Author: your name
 * @Date: 2019-12-02 13:07:23
 * @LastEditTime: 2019-12-05 11:11:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /江苏第一首页/index.html
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>首页</title>
</head>

<body>
    <section class="wrapper" id="app">
        <div class="global-content">
            <header class="header">
                <div class="header-left">
                    <div class="point-box">{{topInfo.date | formatDate}}</div>
                    <div>{{new Date()|formatDateWeek }}</div>
                </div>
                <div class="header-right">
                    <div>某某某单位，<img src="./images/user-icon.png" alt=""> {{topInfo.userName}}
                        <div class="point-box">晴 24℃ 东北风4-5级
                        </div>
                    </div>
                    <div>
                        <a href="javascripr:;">
                            <img src="./images/map-icon.png" alt="">
                            电子地图
                        </a>
                        <a href="javascripr:;">
                            <img src="./images/login-icon.png" alt="">
                            进入系统
                        </a>
                        <a href="javascripr:;">
                            <img src="./images/logout-icon.png" alt="">
                            退出系统
                        </a>
                    </div>
                </div>

            </header>

            <main class="main">
                <section class="top-row row">
                    <div class="col-xs-11 row-item">
                        <div class="gutter-box map-box">
                            <!-- 头部总数 -->
                            <div class="all-count" v-html="$options.filters.formatNum(mapInfo.count)">
                            </div>
                            <!-- 总数结束 -->
                            <!-- 左边天气图标 -->
                            <div class="weathet-wrapper">
                                <div><img src="./images/1.png" alt=""></div>
                                <div> <img src="./images/2.png" alt=""></div>
                            </div>
                            <!-- 左边天气图标结束 -->

                            <!-- 类型列表开始 -->
                            <div class="type-list">
                                <div class="type-item" v-for="item in mapInfo.typeList" :key="item.type">
                                    <div :style="{'color':item.type==currenType?item.color:''}"
                                        @click="handleTypeClick(item)">
                                        <span :style="{'background':item.type==currenType?item.color:''}"></span>
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>
                            <!-- 类型列表结束 -->
                            <div id="map" style="width: 100%;height: 100%;"></div>
                        </div>
                    </div>
                    <div class="col-xs-13 row-item">
                        <div class="gutter-box">
                            <div class="layout-box">
                                <div class="layout-header" style="border-color: #1353CE;">
                                    <div class="tabs">
                                        <span :class="{on:item.component==currentTab}" v-for="(item,index) in tabs"
                                            :key="item.component"
                                            @click="currentTab=item.component">{{item.name}}</span>
                                    </div>
                                </div>
                                <div class="layout-body">
                                    <keep-alive>
                                        <component :city-name="cityName" :curren-type="currenType"
                                            v-bind:is="currentTabComponent" class="tab">
                                        </component>
                                    </keep-alive>
                                </div>
                            </div>


                        </div>
                    </div>
                </section>
                <section class="bottom-row row">
                    <div class="col-xs-14 row-item">
                        <div class="gutter-box " style="background: rgba(255,255,255,.8);">
                            <!-- 底部第一块开始 -->
                            <statistical-list :city-name="cityName" :curren-type="currenType"></statistical-list>
                            <!-- 底部第一块结束 -->
                        </div>
                    </div>
                    <div class="col-xs-10 row-item">
                        <div class="gutter-box">

                            <!-- 第二块 -->
                            <wxy-bar :city-name="cityName" :curren-type="currenType"></wxy-bar>
                            <!-- 第二块结束 -->
                        </div>
                    </div>

                </section>
            </main>
        </div>
    </section>
    <!-- 左下统计1 -->
    <script type="text/x-template" id="statisticalList">
        <div class="statistical-list">
              <div class="statistical-item" v-for="(item,index) in statistical" :key="index">
                            <img :src="'./images/'+item.icon" alt="">
                            <p class="first-child">{{item.name}}</p>
                            <template v-for="(child,index) in item.value">
                                    <p class="num-style">{{child.value}}</p>
                                    <p>{{child.name}}</p>
                                    <p v-if="index==0" class=line></p>
                            </template>
               </div>
                <div class="risk-wrapper " :class="warningInfo.warningType">
                            <div class="risk-notice ">当前预警等级： <span>{{currentLv}}</span></div>
                            <div class="warning-area">
                                    当前预警等级较高的区域： <span>{{warningInfo.heightArea.join('、')}}</span>
                            </div>
                            <div  class="info-list">
                                <div  class="info-item" v-for="item in warningInfo.list" :key="item.name">
                                        <div>
                                     
                                                {{item.name}}<br/>
                                                <span>{{item.value}}</span>
                                        </div>
                                </div>
                         
                            </div>
                   </div>
        </div>
      
    </script>
    <!-- 下统计1结束 -->

    <!-- 右下统计图柱状 -->
    <script type="text/x-template" id="wxyBar">
        <div class="layout-box">
                <div class="layout-header">一、二级重大危险源企业及危险源分布 </div>
                <div class="layout-body">
                      <div id="bar" style="height:300px"></div>
                </div>
            </div>
        </script>
    <!-- 右下统计图柱状结束 -->
    <!-- tab 特殊作业-->
    <script type="text/x-template" id="SpecialAssignments">
        <div class="tab-wrapper">
            <div class="tab-layout">
                <div class="tab-layout-col">
                        <select-date @changeDate="handleChangeDate"> 
                                <div slot="title">特殊作业作业量分布</div>
                              
                        </select-date>
                        <div class="tab-layout-col-body">
                            <div style="width:100%;height:100%" id="tszy-line1"></div>
                        </div>
                </div>
                <div class="tab-layout-col">
                        <select-date @changeDate="handleChangeDate2"> 
                                <div slot="title">特殊作业趋势分析</div>
                        </select-date>
                        <div class="tab-layout-col-body">
                                <div style="width:100%;height:100%"  id="tszy-line2"></div>

                        </div>
                </div>
            </div>
            <div class="tab-layout">
                    <select-date @changeDate="handleChangeDate3"> 
                            <div slot="title">特殊作业分布</div>
                    </select-date>
                    <div class="tab-layout-body">
                            <div style="width:100%;height:100%" id="tszy-line3"></div>

                    </div>
            </div>
            
      </div>
    </script>

    <!-- 特殊作业结束 -->
    <!-- tab 监测预警-->
    <script type="text/x-template" id="EaryWaring">
        <div class="tab-wrapper">
            <div class="tab-layout">
                <div class="tab-layout-col">
                        <select-date @changeDate="handleChangeDate"> 
                                <div slot="title">趋势分析</div>
                              
                        </select-date>
                        <div class="tab-layout-col-body">
                            <div style="width:100%;height:100%" id="jcyj-line1"></div>
                        </div>
                </div>
                <div class="tab-layout-col">
                        <select-date @changeDate="handleChangeDate2"> 
                                <div slot="title">预警处理响应时间分析</div>
                        </select-date>
                        <div class="tab-layout-col-body">
                                <div style="width:100%;height:100%"  id="jcyj-line2"></div>

                        </div>
                </div>
            </div>
            <div class="tab-layout">
                    <select-date @changeDate="handleChangeDate3"> 
                            <div slot="title">预警分布</div>
                    </select-date>
                    <div class="tab-layout-body">
                            <div style="width:100%;height:100%" id="jcyj-line3"></div>

                    </div>
            </div>
            
      </div>
   </script>
    <!-- 监测预警结束 -->



    <!-- 时间 -->
    <script type="text/x-template" id="SelectDate">
        <div class="select-date">
         <slot name="title"></slot>
              <div  class="time-grout">
                  <span  v-for="item in tabs":key="item.type" :class="{on:currentDate==item.type}" @click="handleDateClick(item)" >{{item.name}}</span>
              </div>
        </div>
    </script>


    <!-- tab 风险承诺-->
    <script type="text/x-template" id="RiskCommitment">
        <div class="tab-wrapper">
            <div class="tab-layout">
                <div class="tab-layout-col" style="height:136px;flex:initial">
                        <select-date @changeDate="handleChangeDate"> 
                                <div slot="title">承诺统计</div>
                              
                        </select-date>
                        <div class="tab-layout-col-body">
                            <div  class="cntj-list">
                                <div class="cnntj-item" v-for="(item,index) in commitmentCount" :key="index">
                                    {{item.name}}：<span>{{item.value}}</span>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="tab-layout-col">
                        <select-date @changeDate="handleChangeDate2"> 
                                <div slot="title">未承诺趋势分析</div>
                        </select-date>
                        <div class="tab-layout-col-body">
                                <div style="width:100%;height:100%"  id="fxcn-line1"></div>

                        </div>
                </div>
            </div>
            <div class="tab-layout">
                    <select-date @changeDate="handleChangeDate3"> 
                            <div slot="title">未承诺分布</div>
                    </select-date>
                    <div class="tab-layout-body">
                            <div style="width:100%;height:100%" id="fxcn-bar1"></div>

                    </div>
            </div>
            
      </div>
    </script>
    <!-- 风险承诺结束 -->
    <script src="./js/polyfill.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/jiangs.js"></script>
    <script src="./js/echartsFn.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/components/SelectDate.js"></script>
    <script src="./js/components/WxyBar.js"></script>
    <script src="./js/components/StatisticalList.js"></script>
    <script src="./js/components/EaryWaring.js"></script>
    <script src="./js/components/SpecialAssignments.js"></script>
    <script src="./js/components/RiskCommitment.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>